Flex 2.0.1 Extending the Tab Navigator

Well here is my version of an extended Flex tab navigator. I implemented a proper proxy image for the drag operations. Dragging between navigators (very handy for larger applications). Got your standard close button happening, optional of course (as a style). Click an item in the popup list, if not visible the item clicked becomes the first tab. Drag from the popup list is implemented. Drag and drop into a navigator container places the tab as the first item.

With little effort you should be able to separate the tabBar from the navigator if your required to do so.

Doug has posted something similar over on his blog. I have tried to add some interesting things, but heck; it’s a tab navigator. I successfully abstained from looking at his implementation while finishing mine.

This one extends a few different components in order to achieve the desired effect. Here is what I ended up extending.

Tab
TabBar
TabNavigator
PopUpMenuButton
ProgrammaticSkin
HaloBorder

I haven’t overloaded this one with comments, so if you have questions feel free to ask.

The popup menu for the none visible tabs works as I had hoped. I didn’t add a scroll bar to the menu as I thought that if you need one; you should probably rethink your interface. To many tabs is certainly not a good thing. On average in my opinion a user will open between 5 and 12 tabs before they start doing cleanup.

It’ll use the icon and label specified in your container for display within the tab and popup menu.

Perhaps Doug will take this code; look it over and create a combined version that covers the broad spectrum of requirements for such a component. I’d be interested in collaborating with him on a couple other ideas I’ve got rolling around for future things. If you haven’t checked out his blog I suggest you do so. He has a couple of gems over there.

The one thing I wish would have been possible is with regards to the click event on a tab. There seems to be no way to properly have the tab close on mouse up. It seems to be set in stone that this is mouse down only. Normally it wouldn’t be a problem but it doesn’t allow me to conform to a standard action with regards to click hold mouse out button deactivation kind of interaction.

As most things here this is not tested in a production environment so post any bugs you stumble upon, enjoy.

Requires Flash 9 player.

Sample and Source : Extended Tab Navigator

I’ve got some big things coming for the next couple of posts. In the mean time hopefully some people can make use of this one.

EDIT: My bad, title spelling was wrong. I was wondering why It didn’t show up in the flex categories. Anyway I’ll re ping this. Hopefully it doesn’t re show. If it does, my apologies..

Jason Hawryluk